html, body {
    position: relative;
    height: 100%;
}
body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide .scene_bg{
    width:100%;
    height: 100%;
    background-size: 100% 100%;
    overflow: hidden;
}
.swiper-container .swiper-wrapper .first_scene .scene_bg{
    background: url(../images/first_scene_bg.png) no-repeat;
}
.swiper-container .swiper-wrapper img{
    position: absolute;
}
.swiper-container .swiper-wrapper .swiper-slide .scene_bg .top_part .t_1{
    width:16%;
    top:17%;
    left:45%;
    z-index: 100;
}
.swiper-container .swiper-wrapper .swiper-slide .scene_bg .top_part .t_2{
    width:80%;
    left:10%;
}
.swiper-container .swiper-wrapper .swiper-slide .scene_bg .center_part .c_1{
    width:80%;
    top:47%;
    left:10%;
}
.swiper-container .swiper-wrapper .swiper-slide .scene_bg .bottom_part .b_1{
    width:100%;
    bottom: -10%;
}
.swiper-container .swiper-wrapper .swiper-slide .scene_bg .bottom_part .b_2{
    width:15%;
    top:70%;
    left:43%;
}
.swiper-container .swiper-wrapper .swiper-slide .scene_bg .bottom_part .b_3{
    width:15%;
    top:75%;
    left:38%;
}
.swiper-container .swiper-wrapper .swiper-slide .scene_bg .bottom_part .b_4{
    width:15%;
    top:75%;
    left:48%;
}
.swiper-container .second_scene .moon{
    width:44%;
    left:0;
    top: 7%;
}
.swiper-container .second_scene .flower{
    width:50%;
    right:7%;
    top: 0;
}
.swiper-container .second_scene .font{
    width:25%;
    top:35%;
    left:10%;
}
.swiper-container .second_scene .fish{
    width:100%;
    top:50%;
}
.swiper-container .second_scene .lianhua1{
    width:60%;
    bottom: 0;
    left: 0;
}
.swiper-container .second_scene .lianhua2{
    width:53%;
    bottom: 0;
    right: 0;
}
.swiper-container .second_scene .info{
    width:63%;
    top:37%;
    right: 5%;
}
.swiper-container .third_scene .big_flower{
    width:90%;
    left:-20%;
    bottom:7%;
}
.swiper-container .third_scene .small_flower{
    width:17%;
    bottom: 0;
    left:26%;
}
.swiper-container .third_scene .font{
    width:37%;
    right: 3%;
    top:16%;
}
.swiper-container .forth_scene .big_moon{
    width:67%;
    left:20%;
}

#music{
    width:10%;
    position: absolute;
    top:3%;
    right: 5%;
    z-index: 101;
    animation: run 2s linear infinite
}
@keyframes run{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}